<template>
  <div class="GdwyyAppMbsc">
    <GdwyyAppSmallTitle title="目标市场" :showDw="false"></GdwyyAppSmallTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <a-table
      v-else
      :bordered="true"
      :columns="tableColumns"
      :data-source="data"
      :pagination="false"
      size="small"
      :scroll="{ x: 900, y: 200 }"
    >
      <span v-for="(item, index) in slotList" :key="index" :slot="item" slot-scope="text, record">
        <span v-if="text == 0">{{ text }}</span>
        <a v-else @click="handleGoDetail(item, record)">{{ text }}</a>
      </span>
    </a-table>
  </div>
</template>
  
  <script>
import { GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { postAction } from '@api/manage'
export default {
  name: 'GdwyyAppMbsc',
  components: {
    GdwyyAppSmallTitle,
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    loading: {
      type: Boolean,
      default: true,
    },
    queryParam: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },

  data() {
    return {
      tableList: [],
      visible: false,
      tableColumns: [
        {
          title: '目标市场',
          dataIndex: 'VILLAGE_NAME',
          width: 100,
        },
        {
          title: '装机',
          children: [
            {
              title: '派单',
              dataIndex: 'JF_0001',
              scopedSlots: { customRender: 'JF_0001' },
              align: 'center',
            },
            {
              title: '在途',
              dataIndex: 'JF_0002',
              scopedSlots: { customRender: 'JF_0002' },
              align: 'center',
            },
            {
              title: '竣工',
              dataIndex: 'JF_0003',
              scopedSlots: { customRender: 'JF_0003' },
              align: 'center',
            },
            {
              title: '退单',
              dataIndex: 'JF_0004',
              scopedSlots: { customRender: 'JF_0004' },
              align: 'center',
            },
          ],
        },
        {
          title: '移机',
          children: [
            {
              title: '派单',
              dataIndex: 'JF_0005',
              scopedSlots: { customRender: 'JF_0005' },
              align: 'center',
            },
            {
              title: '在途',
              dataIndex: 'JF_0006',
              scopedSlots: { customRender: 'JF_0006' },
              align: 'center',
            },
            {
              title: '竣工',
              dataIndex: 'JF_0007',
              scopedSlots: { customRender: 'JF_0007' },
              align: 'center',
            },
            {
              title: '退单',
              dataIndex: 'JF_0008',
              scopedSlots: { customRender: 'JF_0008' },
              align: 'center',
            },
          ],
        },
        {
          title: '修机',
          children: [
            {
              title: '派单',
              dataIndex: 'JF_0009',
              scopedSlots: { customRender: 'JF_0009' },
              align: 'center',
            },
            {
              title: '在途',
              dataIndex: 'JF_0010',
              scopedSlots: { customRender: 'JF_0010' },
              align: 'center',
            },
            {
              title: '竣工',
              dataIndex: 'JF_0011',
              scopedSlots: { customRender: 'JF_0011' },
              align: 'center',
            },
          ],
        },
        {
          title: '宽带发展',
          children: [
            {
              title: '宽带',
              dataIndex: 'KD_0008',
              scopedSlots: { customRender: 'KD_0008' },
              align: 'center',
            },
            {
              title: '真千兆',
              dataIndex: 'KD_0009',
              scopedSlots: { customRender: 'KD_0009' },
              align: 'center',
            },
          ],
        },
      ],
      zbxqColumns: [
        {
          title: '包区名称',
          dataIndex: 'BQ_NAME',
          align: 'center',
          width: '26.6667vw',
        },
        {
          title: '发展渠道',
          dataIndex: 'DEVELOP_DEPART_ID',
          align: 'center',
          width: '26.6667vw',
        },
        {
          title: '发展人',
          dataIndex: 'DEVELOP_STAFF_ID',
          align: 'center',
          width: '26.6667vw',
        },
        {
          title: '用户名',
          dataIndex: 'USER_NAME',
          align: 'center',
          width: '26.6667vw',
        },
        {
          title: '产品名称',
          dataIndex: 'PRODUCT_NAME',
          align: 'center',
          width: '40vw',
        },
        {
          title: '开通时间',
          dataIndex: 'OPEN_DATE',
          align: 'center',
          width: '26.6667vw',
        },
        {
          title: '资费',
          dataIndex: 'RENT_FEE',
          align: 'center',
          width: '26.6667vw',
        },
      ],
      zbxqtableData: [],
      bqxqLoading: false,
      slotList: [
        'JF_0001',
        'JF_0002',
        'JF_0003',
        'JF_0004',
        'JF_0005',
        'JF_0006',
        'JF_0007',
        'JF_0008',
        'JF_0009',
        'JF_0010',
        'KD_0008',
        'KD_0009',
      ],
    }
  },

  methods: {
    modalCancel() {
      this.visible = false
    },
    async getBqxq(arg) {
      this.zbxqtableData = []
      this.bqxqLoading = true
      const { queryParam } = this
      const params = {
        bqId: arg.bqId,
        bqName: arg.BQ_NAME,
        dayId: queryParam.dayId,
      }
      const res = await postAction('/Sql2ApiCall/call/' + '8a31cdd68b28dfb0018b291f7b230001', params)
      if (res.success) {
        let resultjson = JSON.parse(res.result)
        let resultdata = resultjson.data
        this.zbxqtableData = resultdata
      }
      this.bqxqLoading = false
    },
    handleGoDetail(item, row) {
      this.$emit('openDialog', {
        num: row[item],
        params: { villageId: row.VILLAGE_ID, kpiCode: item },
      })
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppMbsc {
  margin-top: 5.3333vw;
  background: #fff;
  margin-bottom: 5.3333vw;
  padding: 2.6667vw;
  border-radius: 1.6vw;
  padding: 3.2vw 2.1333vw;
  box-sizing: border-box;
  margin-left: 2.6667vw;
  margin-right: 2.6667vw;
  ::v-deep {
    .ant-empty-description {
      text-align: center;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  box-sizing: border-box;
  max-height: 70%;
  padding: 2.6667vw;
  background-color: #fff;
}
.mgb {
  margin-bottom: 6.4vw;
}
</style>